import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { getLogin } from "../store/modules/usersStore.ts";
import { useEffect } from "react";
import { AppDispatch, useAppDispatch } from "@/store/index.tsx";
import { Button, Col, Form, FormProps, Input, Row } from "antd";
import ViewAbout from "./About.tsx";
import TaskView from "./task/index.tsx";
import ReactDndView from "./reactdnd/index.tsx";


type FieldType = {
    username?: string;
    password?: string;
};
const LoginView = () => {
    const dispatch = useAppDispatch()
    const navigate = useNavigate();
    const token = useSelector((state: any) => state.users.token); // 使用useSelector获取token
    useEffect(() => {
        if (token) {
            // 如果token存在，跳转到主页面
            navigate('/');
        }
    }, [token]);



    const loginApi = () => {
        const data = {
            userName: 'zgq',
            password: '123456'
        }
        dispatch(getLogin(data))

    }
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        const data = {
            userName: values.username,
            password: values.password
        }
        dispatch(getLogin(data))
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (<>
        <Row>
            <Col xs={24} sm={24} md={24} lg={32} xl={24}>
                <div className={"flex justify-center"}>
                    <div>
                        <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                label="Username"
                                name="username"
                                rules={[{ required: true, message: '请填写账户' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="Password"
                                name="password"
                                rules={[{ required: true, message: '请填写密码' }]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item label={null}>
                                <Button type="primary" htmlType="submit">
                                    登录loading
                                </Button>
                            </Form.Item>
                        </Form>
                        {/* <Button type="primary" onClick={loginApi}>登录loading</Button> */}
                    </div>
                </div>
                {/* <div className={" w-screen pl-1 pr-1"}><TaskView ></TaskView></div> */}
                <div className={" w-screen pl-1 pr-1"}><ReactDndView ></ReactDndView></div>

            </Col>
        </Row>

    </>
    );
};

export default LoginView;
